import React, { useEffect, useRef } from "react";

function Canvas() {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    CanvasRenderingContext2D.prototype.fillTextVertical = function (
      text,
      x,
      y
    ) {
      var context = this;
      var canvas = context.canvas;

      var arrText = text.split("");
      var arrWidth = arrText.map(function (letter) {
        let fontHeight =
          context.fontBoundingBoxAscent + context.fontBoundingBoxDescent;
        //所有字在这个字体下的高度
        let actualHeight =
          context.actualBoundingBoxAscent + context.actualBoundingBoxDescent;
        // 当前文本字符串在这个字体下用的实际高度

        // const fix =
        //   context.measureText(text).actualBoundingBoxAscent +
        //   context.measureText(text).actualBoundingBoxDescent;
        const fix2 =
          context.measureText(text).fontBoundingBoxAscent +
          context.measureText(text).fontBoundingBoxDescent;

        return fix2;
      });
      console.log("arrWidth", arrWidth);

      var align = context.textAlign;
      var baseline = context.textBaseline;

      if (align == "left") {
        x = x + Math.max.apply(null, arrWidth) / 2;
      } else if (align == "right") {
        x = x - Math.max.apply(null, arrWidth) / 2;
      }
      if (
        baseline == "bottom" ||
        baseline == "alphabetic" ||
        baseline == "ideographic"
      ) {
        y = y - arrWidth[0] / 2;
      } else if (baseline == "top" || baseline == "hanging") {
        y = y + arrWidth[0] / 2;
      } else if (baseline === "middle") {
        // 竖排垂直居中
        y =
          y +
          arrWidth[0] / 2 +
          canvasRef.current!.height / 2 -
          arrWidth.reduce((a, b) => a + b) / 2;
      }

      context.textAlign = "center";
      context.textBaseline = "middle";

      // 开始逐字绘制
      arrText.forEach(function (letter: string, index: number) {
        // 确定下一个字符的纵坐标位置
        var letterWidth = arrWidth[index];
        // 是否需要旋转判断
        var code = letter.charCodeAt(0);
        if (code <= 256) {
          // context.translate(x, y);
          // 英文字符，旋转90°
          // context.rotate((90 * Math.PI) / 180);
          // context.translate(-x, -y);
        } else if (index > 0 && text.charCodeAt(index - 1) < 256) {
          // y修正
          y = y + arrWidth[index - 1] / 2;
        }
        context.fillText(letter, x, y);
        // 旋转坐标系还原成初始态
        // context.setTransform(1, 0, 0, 1, 0, 0);
        // 确定下一个字符的纵坐标位置
        var letterWidth = arrWidth[index];
        y = y + letterWidth;
        console.log("y", y);
      });
      // 水平垂直对齐方式还原
      context.textAlign = align;
      context.textBaseline = baseline;
    };

    var context = canvasRef.current!.getContext(
      "2d"
    ) as CanvasRenderingContext2D;

    context.fillStyle = "rgba(0,0,0,0.5)";
    context.fillRect(0, 0, canvasRef.current!.width, canvasRef.current!.height);

    context.font = "24px STKaiti, sans-serif";
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.fillTextVertical(
      "sdfw",
      canvasRef.current!.width / 2,
      0
    );
  }, []);
  return <canvas ref={canvasRef} width={500} height={1000} />;
}
export default Canvas;
